import React from "react";
import {Outlet,useNavigate} from "react-router-dom"
import "../visualFilecss/VisualMain.css";
import {
  UnorderedListOutlined,
  WarningOutlined,
  GiftOutlined,
  RedditOutlined
} from "@ant-design/icons";
import { Menu } from "antd";
import "../../rem/flexble"
export default function VisualMain() {
  const navigate = useNavigate()
  const items = [
    
    {
      key: "grp",
      type: "group",
      children: [
        { key: "/visual/cockpit", label: "园区驾驶舱",icon: <UnorderedListOutlined /> },
        { key: "/visual/investment", label: "园区招商分析" ,icon: <WarningOutlined />},
        { key: "/visual/manage", label: "园区设备管理" ,icon: <GiftOutlined />},
        { key: "/visual/deplete", label: "能源消耗分析" ,icon: <RedditOutlined />},
      ],
    },
  ];

  return (
    <div className="main">
      <div className="menu">
      <Menu
      onClick={(e)=>{
        navigate(e.key)
      }}
        style={{ width: "100%",height:'100%',backgroundColor:'#415C85' }}
        defaultSelectedKeys={["/visual/cockpit"]}
        mode="inline"
        items={items}
      />
      </div>
      <div className="content">
          <div className="contentmax">
          <Outlet/>
          </div>
      </div>
    </div>
  );
}
